<template>
    <div id="workman">
        
        <div style="background-color: white;padding: 10px;">
            <el-button v-show="m_admin" type="primary" @click="dataupload()">数据导入</el-button>
            <el-button v-show="m_admin" type="danger" @click="deldata()">删除数据</el-button>
            <div style="width: 900px;">
                <el-tabs v-model="activeName" @tab-click="checkyear">
                    <el-tab-pane  v-for="item in yearList" :label="item.year" :name="item.year"></el-tab-pane>
                </el-tabs>
            </div>
            <el-table border :data="Manlist" style="width: 900px" height="500">
                <el-table-column :label="m_year + '年全省人口数据表'">
                    <el-table-column type="index" label="排序" width="80" />
                    <el-table-column prop="ad_name" label="地区名称" />
                    <!-- <el-table-column prop="total" label="总人口数（万人）" /> -->
                    <el-table-column prop="resident" label="常住人口（万人）" />
                    <el-table-column prop="employment" label="就业人口（万人）" />
                    <el-table-column prop="urbanization" label="城镇化率（%）" />
                    <el-table-column prop="birth" label="出生率（%）" />
                    <el-table-column prop="death" label="死亡率（%）" />
                    <el-table-column prop="density" label="人口密度" />
                    <el-table-column prop="density" label="操作">
                        <template #default="scope">
                            <el-button @click="changeData(scope.row)" type="success" size="small">修改数据</el-button>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogVisible" title="修改信息" width="500">
            <div>
                <el-form :model="dataForm" label-width="auto" style="max-width: 600px">
                    <el-form-item label="区划名称">
                        <el-input v-model="dataForm.ad_name" />
                    </el-form-item>
                    <el-form-item label="区划代码">
                        <el-input v-model="dataForm.ad_code" />
                    </el-form-item>
                    <el-form-item label="总人口">
                        <el-input v-model="dataForm.total" type="number" />
                    </el-form-item>
                    <el-form-item label="常住人口">
                        <el-input v-model="dataForm.resident" type="number" />
                    </el-form-item>
                    <el-form-item label="城镇化率">
                        <el-input v-model="dataForm.urbanization" type="number" />
                    </el-form-item>
                    <el-form-item label="出生率">
                        <el-input v-model="dataForm.birth" type="number" />
                    </el-form-item>
                    <el-form-item label="死亡率">
                        <el-input v-model="dataForm.death" type="number" />
                    </el-form-item>
                    <el-form-item label="人口密度">
                        <el-input v-model="dataForm.density" type="number" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureUpdate()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref,watch } from "vue";
import $sys from '../../api/sys';
import { useRouter,useRoute } from "vue-router";
import { dataStore } from "../../store/data";
import pagination from "../../components/pagination.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const dialogVisible = ref(false);
const firstpage = ref(true);
const $store = dataStore();
const $router = useRouter();
const $route = useRoute();
const yearList = ref([]);
const page = reactive({
    pagenum: 1,
    pagesize: 999,
    total: 0
});
const activeName=ref(2012)
const Manlist = ref([]);
const m_admin=ref(false);
onMounted(() => {
    if ($route.query.admin == '1') {
        m_admin.value = true;
    } else {
        m_admin.value = false;
    }
    getyearlist();
    getman({year:2012})
    firstpage.value = true;
});
watch(() => $route.query, (ov, nv) => {
    if ($route.query.admin == '1') {
        m_admin.value = true;
    } else {
        m_admin.value = false;
    }
})
function checkyear(e){
    let obj={};
    obj.year=e.paneName;
    getman(obj);
}
const dataForm = ref({});
function changeData(e) {
    dataForm.value = JSON.parse(JSON.stringify(e));
    dialogVisible.value = true;
}
function sureUpdate() {
    ElMessageBox.confirm(
        '确定修改该数据?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $sys.updateRKdata(dataForm.value).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '修改成功!',
                    type: 'success'
                })
                dialogVisible.value = false;
                getman();
            }
        })
    })
}
function dataupload() {
    $store.download = 'pop';
    $router.push({
        name: 'download'
    });
}
function getyearlist() {
    $sys.popGetYear().then(res => {
        if (res.code == 200) {
            yearList.value = res.data;
        }
    });
}
function deldata(){
    ElMessageBox.confirm(
        `确定删除${m_year.value}年人口数据?`,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(()=>{
        $sys.delRkdata(m_year.value).then(res=>{
            if (res.code == 200) {
                ElMessage({
                    message: '删除成功!',
                    type:'success'
                })
                getman({year:m_year.value});
            }else{
                ElMessage({
                    message: res.message,
                    type: 'warning'
                })
            }
        })
    })
}
const m_year = ref('2012')
function getman(e) {
    firstpage.value = false;
    if (e) {
        m_year.value = e.year;
        page.year = e.year;
    }
    $sys.popGetData(page).then(res => {
        if (res.code == 200) {
            page.pagesize = 999;
            page.total = Number(res.data.count);
            Manlist.value = res.data.result;
        }
    });
}
function getsize(e) {
    page.pagesize = Number(e);
    getman();

}
function getpage(e) {
    console.log(e);
    page.pagenum = Number(e);
    getman();
}
</script>

<style scoped lang="less">
#workman {
    padding: 20px;
}
</style>
